<template>
	<view class="container">
		<view class="item" @click="dateShow=true">
			<u-input v-model="realName" border="none" placeholder="请选择生日" readonly >
				<u-text
					text="生日"
					slot="prefix"
					margin="0 10rpx 0 0"
				></u-text>
			</u-input>
		</view>
		<view class="submit_btn">
			<u-button  type="primary" shape="circle" text="保存"></u-button>
		</view>
		<u-datetime-picker
			ref="datetimePicker"
			:show="dateShow"
			mode="date"
			:formatter="formatter"
			@confirm="confirmDate"
			@cancel="dateShow=false"
		></u-datetime-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			realName: '',
			dateShow:false
		};
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		confirmDate(e){
			let time = new Date(e.value);
			let y = time.getFullYear();
			let m = time.getMonth() + 1;
			let d = time.getDate();
			
			this.realName = y+'-'+add0(m)+'-'+add0(d);
			function add0(m){return m<10?'0'+m:m }
			this.dateShow = false
		},
	},
};
</script>

<style lang="scss" >
	page{
		background-color:#f8f8f8 ;
	}
</style>
<style lang="scss" scoped>
	.container{
		.item{
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin: 20rpx 0;
		}
		.submit_btn{
			padding:  30rpx ;
		}
	}
</style>
